<!-- OA申请页面顶部的 审批信息 模块 -->
<template>
    <div class="approve_flow_container">
        <div class="box">
            <div>审批状态</div>
            <div class="value">{{ props.status }}</div>
        </div>
        <div class="box">
            <div>审批流程</div>
            <div class="person">
                <template v-if="props.workflowList && props.workflowList.length > 0">
                    <div v-for="(item, index) in props.workflowList" :key="index">
                        <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                            {{ item.key }}
                        </span>
                        <span v-if="index != props.workflowList.length - 1">→</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, type PropType } from 'vue'

const props = defineProps({
    status: { type: String, required: true, default: () => '' }, // 审批状态
    workflowList: { type: Object as PropType<Array<any>>, required: false, default: () => [] } // 审批流程
})

console.log(props)

</script>

<style scoped lang="scss">
.approve_flow_container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .box {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        height: 90rem;
        justify-content: center;
        margin-bottom: 20rem;
        margin-right: 10rem;
        min-width: 100rem;
        padding: 12rem;

        .value {
            font-size: 20rem;
        }

        .person {
            color: rgb(95, 177, 127);
            font-size: 20rem;
            font-weight: 500;
        }
    }
}
</style>